<template>
  <div class="content-list-view">
    <div
      class="chapter-section-main"
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.01)"
    >
      <el-collapse class="chapters" v-model="activeChapters">
        <el-collapse-item
          :name="index1"
          class="chapter"
          v-for="(chapter, index1) in chapters"
          :key="chapter.id"
        >
          <div slot="title" class="chapter-title">
            <span>{{ chapter.name }}</span>
            <!-- <span @click="openOrClose(index1)"
              ><img src="@/assets/more.png" alt="more"
            /></span> -->
          </div>
          <div class="chapter-content">
            <div
              class="section"
              v-for="(section, index2) in chapter.sections"
              :key="section.id"
            >
              <div class="section-title">
                {{ index1 + 1 }}-{{ index2 + 1 }} {{ section.name }}
              </div>
              <div class="section-content">
                <div
                  class="resource"
                  v-for="content in section.contents"
                  :key="content.id"
                  @click="gotoLearnBench(content.id)"
                >
                  <div>
                    <span class="res-type">{{ content.type | resourceType }}</span>
                    <span class="res-title">{{ content.name }}</span>
                  </div>
                  <div>
                    <span class="res-progress">{{ content.process }}%</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="test" @click="gotoTest(chapter.test)">单元测试</div>
          </div>
        </el-collapse-item>
      </el-collapse>

      <!-- <div
        class="chapter"
        v-for="(chapter, index1) in chapters"
        :key="chapter.id"
      >
        <div class="chapter-title">
          <span>{{ chapter.title }}</span>
          <span @click="openOrClose(index1)"
            ><img src="@/assets/more.png" alt="more"
          /></span>
        </div>
        <div class="chapter-content">
          <div
            class="section"
            v-for="(section, index2) in chapter.sections"
            :key="section.id"
          >
            <div class="section-title">
              {{ index1 + 1 }}-{{ index2 + 1 }} {{ section.title }}
            </div>
            <div class="section-content">
              <div
                class="resource"
                v-for="res in section.resources"
                :key="res.id"
                @click="gotoLearnBench(res.id)"
              >
                <div>
                  <span class="res-type">{{ res.type | resourceType }}</span>
                  <span class="res-title">{{ res.title }}</span>
                </div>
                <div>
                  <span class="res-progress">{{ res.progress }}%</span>
                </div>
              </div>
            </div>
          </div>
          <div class="test" @click="gotoTest(chapter.test)">单元测试</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "ContentListView",
  data() {
    return {
      activeChapters: [0],
      loading: false,
      chapters: [],
    };
  },
  filters: {
    resourceType(type) {
      switch (type) {
        case 0:
          return "视频";
        case 1:
          return "文档";
        case 2:
          return "讨论";
        default:
          return "未知";
      }
    },
  },
  mounted() {
    this.getDetailCourseDirs()
  },
  methods: {
    getDetailCourseDirs() {
      this.loading = true;
      this.$api.getDetailCourseDirs({
        courseId:this.$route.params.courseId
      }).then((res) => {
        this.chapters = res.data.data;
        this.loading = false;
      });
    },
    gotoLearnBench(contentId) {
      this.$router.push({
        name: "learn-bench",
        params: {
          contentId: contentId,
        },
      });
    },
    gotoTest(test) {
      this.$router.push({
        name: "learn-test-detail",
        params: {
          testId: test.id,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.chapter-section-main{
  min-height: 540px;
}
.chapters {
  border: none;
}
.chapter {
  margin-bottom: 20px;
  padding: 10px;
}

.chapter-title {
  font-size: 18px;
  &:hover{
    transform: translateX(1px)translateY(1px);
    color: #3b85da;
  }

  img {
    width: 12px;
    height: 12px;
    object-fit: cover;
  }
}

.chapter-content {
  padding: 0 20px;
  font-size: 14px;
}

.test {
  cursor: pointer;
}

.section {
  margin: 15px 0;
  line-height: 1.8;
  &:hover{
    transform: translateX(1px)translateY(1px);
    color: #3b85da;
  }

  .resource {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }
  .res-type,
  .res-progress {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 5px;
    text-align: center;
  }
  .res-type {
    margin-right: 10px;
    color: #8eb9ff;
    border: 1px solid #8eb9ff;
  }
  .res-progress {
    background: #357ff8;

    color: white;
  }
}
</style>
